<template>
  <div class="pages outDepotMg">
    <div class="pageLevel" v-if="!sub">
      <div class="tableSearch">
        <el-form label-width="100px" class="demo-ruleForm">
          <el-form-item label label-width="15px">
            <div class="tableSearch tableSearchs">
              <el-form label-width="100px" class="demo-ruleForm">
                <el-form-item label="出库类型：" label-width="100px">
                  <el-select size="mini" v-model="selectdata.type" placeholder="请选择">
                    <el-option label="全部" value></el-option>
                    <el-option label="其它出库" value="0"></el-option>
                    <el-option label="销售出库" value="1"></el-option>
                    <el-option label="盘亏出库" value="2"></el-option>
                    <el-option label="调拨出库" value="3"></el-option>
                    <el-option label="POS销售出库" value="4"></el-option>
                    <el-option label="报损出库" value="5"></el-option>
                    <el-option label="退货出库" value="6"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label label-width="15px">
                  <el-input
                    class="input"
                    v-model="selectdata.keyword"
                    size="mini"
                    placeholder="请输入出库单号"
                  ></el-input>
                </el-form-item>
                <el-form-item label label-width="15px">
                  <el-button type="primary" size="mini" @click="searchSelect" class="Button">查 询</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <!-- 表格 -->
      <div class="tableMain">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
          <el-table-column prop="outCode" label="出库单号" align="center"></el-table-column>
          <el-table-column prop="outType" label="出库类型" align="center" :formatter="outType"></el-table-column>
          <el-table-column prop="warehouseName" label="出库仓库" align="center"></el-table-column>
          <el-table-column prop="orderDate" label="出库时间" align="center"></el-table-column>
          <el-table-column prop="userName" label="操作员" align="center"></el-table-column>
          <el-table-column align="center" label="操作" width="180">
            <template slot-scope="scope">
              <el-button
                size="small"
                v-if="setRole('查看')"
                @click="routerPush(1,scope.row.id)"
                type="text"
                class="addDetail"
              >查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 页码 -->
        <div class="pageblock">
          <el-button size="small" type="primary" class="topage">确定</el-button>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5,10,20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </div>
    <div class="pageLevel" v-else>
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import u from "@/util";
import s from "@/util/state";
import { findOutBoundListPage, getRepertoryOutBoundListPage, addRepertoryOutBound } from "@/api";
export default {
  components: {},
  computed: mapState(["sub", "power", "merchantId"]),
  data() {
    return {
      senior: false,
      selectdata: {
        selected: "",
        type: "",
        keyword: ""
      },
      tableData: [],
      total: 0,
      pageSize: 20,
      currentPage: 1
    };
  },
  mounted() {
    this.tableget(this.pageSize, 1);
  },
  methods: {
    //配置权限
    setRole(key) {
      return u.selectTitle(this.power, key);
    },
    outType: s.outType,
    outStatus: s.outStatus,
    // tim(row) {
    //   return u.foryear(parseInt(row.orderDate));
    // },
    searchSenior() {
      if (this.senior == false) {
        this.senior = true;
      } else {
        this.senior = false;
      }
    },
    // 获取表格数据
    tableget(pageSize, pageNum) {
      let purchaseinCode = this.selectdata.keyword;
      let receivedStatus = this.selectdata.selected;
      let data = {
        pageSize: pageSize,
        pageNum: pageNum,
        shopId: this.merchantId,
        outStatus: this.selectdata.selected,
        outCode: this.selectdata.keyword,
        outType: this.selectdata.type
      };
      getRepertoryOutBoundListPage(data).then(res => {
        console.log(res);
        if (res.code == "200") {
          this.total = res.data.pageTotal;
          this.tableData = res.data.list;
        }
      });
    },
    // 点击查询按钮
    searchSelect() {
      this.currentPage=1;
      this.tableget(this.pageSize, this.currentPage);

    },
    //路由跳转
    routerPush(showTab, id = "") {
      u.routerTo(
        "/order-center/stock-management/stock-outDepotMg/stock-outDepotEdit",
        {
          showTab: "1",
          id: id
        }
      );
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage=1;
      this.tableget(val, this.currentPage);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.tableget(this.pageSize, val);
    }
  }
};
</script>
<style scoped>
.operationBox {
  margin-left: 35px;
}
.tableSearchs {
  position: relative;
  margin-top: -10px;
}
.tableSearchs .el-input__icon {
  position: absolute;
  top: 12px;
  left: 280px;
  z-index: 10;
  width: 25px;
  height: 35px;
}
.el-icon-search:before {
  color: #019feb;
}
</style>
<style>
.el-input__inner {
  padding: 0 20px;
}
.el-icon-search:before {
  color: #3a8ee6;
}
</style>

